<template>
	<div style="width: 100%;margin-top: 30px;border: #D1C2D8 solid 1px;">
		<div style="width: 100%;height: 120px;background-color: rgb(245,245,245);">
			<el-steps :active="2" style="margin-left: 50px;margin-right: 50px;">
			  <el-step title="1.确认汇报内容" icon="el-icon-edit" style="margin-top: 30px;"></el-step>
			  <el-step title="2.确认订单" icon="el-icon-goods" style="margin-top: 30px;"></el-step>
			  <el-step title="4.完成" icon="el-icon-circle-check" style="margin-top: 30px;"></el-step>
			</el-steps>
		</div>
		<div style="width: 100%;">
			<div style="margin-left: 30px; margin-top: 30px;">
				<p style="display: inline;color: coral;font-size: 25px;font-weight: 1000;">|</p>
				<p style="color: coral;font-size: 20px;display: inline;"> 收货地址</p>
				<div style="margin-left: 10%;margin-top: 2%;">				
				  
				  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				    <el-form-item label="收货人" prop="name">
				      <el-input v-model="ruleForm.name" placeholder="请填写收货人姓名"></el-input>
				    </el-form-item>
				    <el-form-item label="手机" prop="phone">
				      <el-input v-model="ruleForm.phone" placeholder="手机号必须为11位"></el-input>
				    </el-form-item>
					<el-form-item label="地址" prop="address">
					 <el-cascader v-model="ruleForm.address" :options="cityData"></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" prop="xxaddress" >
					 <el-input v-model="ruleForm.xxaddress" placeholder="村镇,门牌号等"></el-input>
					</el-form-item>
				   <!-- <el-form-item>
				      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
				      <el-button @click="resetForm('ruleForm')">重置</el-button>
				    </el-form-item> -->
				  </el-form>
				
				</div>				
			</div>
			<div style="margin-left: 30px; margin-top: 30px;">
				<p style="display: inline;color: coral;font-size: 25px;font-weight: 1000;">|</p>
				<p style="color: coral;font-size: 20px;display: inline;"> 项目信息</p>
				<el-link type="primary" style="margin-left: 10px;" @click="dingdan1()">修改数量</el-link>
				
				
				
				<div>
					<div style="width: 95%;height: 150px;border: 1px solid #D1C2D8;margin-left: 12px;margin-top: 20px;">
						<div style="width: 100%;height: 50px;background-color: rgb(221,221,221);">						
							<p style="display: inline;margin-left: 6%;position: relative;top: 15px;">项目名称</p>				
							<p style="display: inline;margin-left: 18%;position: relative;top: 15px;">发起人</p>		
							<p style="display: inline;margin-left: 20%;position: relative;top: 15px;">回报内容</p>
							<p style="display: inline;margin-left: 14%;position: relative;top: 15px;">回报数量</p>
							<p style="display: inline;margin-left: 9%;position: relative;top: 15px;">支持单价</p>
							
						</div>
						<div style="width: 20%;height: 100px;border-right: #D1C2D8 1px solid;float: left;">
							<p style="text-align: center;margin-top: 30px;">{{project.projectName}}</p>
						</div>
						<div style="width: 25%;height: 100px;border-right: #D1C2D8 1px solid;float: left;">
							<p style="text-align: center;margin-top: 30px;">{{sponsor.introduce}}</p>
						</div>
						<div style="width: 25%;height: 100px;border-right: #D1C2D8 1px solid;float: left;">
							<p style="text-align: center;margin-top: 30px;">{{retutable.retuText}}</p>
						</div>
						<div style="width: 15%;height: 100px;border-right: #D1C2D8 1px solid;float: left;">
							<p style="text-align: center;margin-top: 30px;">{{orderNumber1}}</p>
							<!-- 当前订单支持最大的数额{{orderNumber2}}					 -->
						</div>
						<div style="height: 100px;">
							<p style="text-align: center;margin-top: 30px;color: coral;">￥ &nbsp; {{retutable.payMoney}}</p>
						</div>
					</div>
					<p style="display: inline;margin-top: 30px;">备注:</p><el-input v-model="ruleForm.beizhu" placeholder="请输入内容" style="width: 50%;margin-left: 20px;margin-top: 30px;"></el-input>
				</div>				
				
				<div style="width: 100%;margin-top: 50px;">
					<p style="display: inline;color: coral;font-size: 25px;font-weight: 1000;">|</p>
					<p style="color: coral;font-size: 20px;display: inline;"> 收货地址</p>
					<div style="width: 96%;height: 260px;margin-top: 30px;border: coral 5px solid;border-radius: 4px;background-color: rgb(252,248,227);">
						<div style="float: left;margin-left: 50px;">
							<p>收件人：{{ruleForm.name}}</p><br />
							<p>&nbsp;手机：{{ruleForm.phone}}</p><br />
							<p>&nbsp;地址：{{ruleForm.address}}</p><br />
							<p>&nbsp;备注：{{ruleForm.beizhu}}</p>
						</div>
						
						<div style="float: right;margin-right: 50px;margin-top: 20px;">
						<p style="display: inline;">支持金额：<p style="color: coral;display: inline;">￥{{retutable.payMoney}}</p></p>
						<p style="display: inline;">配送费用：<p style="color: coral;display: inline;">￥{{retutable.isEmail}}</p></p>
						<p style="display: inline;">优惠金额：<p style="color: coral;display: inline;">-￥0.00</p></p>
						<p style="display: inline;">支付总金额：<p style="color: coral;display: inline;">￥{{ruleForm.zongjia}}</p></p>
						<el-button type="success" plain class="el-icon-potato-strips" @click="addOrder()">立即付款</el-button>
						  <el-radio style="display: block;margin-top: 20px;" v-model="radio" label="1">我已了解风险和规则</el-radio>
						</div>
					</div>
				</div>
				
			</div>
		
		</div>
		
		
		
		<div style="width: 90%;height: 200px;margin-left: 30px;margin-top: 30px;margin-bottom: 30px;border-left: #D1C2D8 5px solid;">
			<div style="margin-left: 30px;">
				<i class="el-icon-warning" style="font-size: 20px;color: skyblue;">提示</i>
				<p style="font-size: 10px;">1.众筹并非商品交易，存在一定风险。支持者根据自己的判断选择、支持众筹项目，与发起人共同实现梦想并获得发起人承诺的回报。</p>
				<p style="font-size: 10px;">2.众筹平台仅提供平台网络空间及技术支持等中介服务，众筹仅存在于发起人和支持者之间，使用众筹平台产生的法律后果由发起人与支持者自行承担。</p>
				<p style="font-size: 10px;">3.本项目必须在2017-06-04之前达到 ￥1000000.00 的目标才算成功，否则已经支持的订单将取消。订单取消或募集失败的，您支持的金额将原支付路径退回。</p>
				<p style="font-size: 10px;">4.请在支持项目后15分钟内付款，否则您的支持请求会被自动关闭。</p>
				<p style="font-size: 10px;">5.众筹成功后由发起人统一进行发货，售后服务由发起人统一提供；如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情况，您需要直接和发起人协商解决。</p>
				<p style="font-size: 10px;">6.如您不同意上述风险提示内容，您有权选择不支持；一旦选择支持，视为您已确认并同意以上提示内容。</p>
			</div>
		</div>
		
	</div>
	
</template>

<script>
	import cityData from '../citydata.js'
	export default {
	    data() {
	      return {
			 // address:'',
			cityData:cityData,
			radio: '2',
			retutable:{},
			project:{},
			sponsor:{},
			orderNumber:'',
			orderNumber1:'',
			ruleForm: {
					  isPay:'1',
					  zongjia:'',
					  pId:'',
					  userId:'',
					  retuId:'',
					  beizhu:'',
			          name: '',
					  phone:'',
					  address:'',
					  xxaddress:''
			        },
			 rules: {
			          name: [
			            { required: true, message: '请输入收货人名称', trigger: 'blur' },
			            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
			          ],
					  phone: [
					    { required: true, message: '请输入手机号', trigger: 'blur' },
					    { min: 11, max: 11, message: '手机号长度在 11个 数字', trigger: 'blur' }
					  ],
					  xxaddress: [
					    { required: true, message: '请输入详细收货地址', trigger: 'blur' },
					  ]
			        }				 
	      }
	    },
		methods:{
			async selecctAllId(){
				// var retuId = window.sessionStorage.getItem("retuId");
				// var projectId = window.sessionStorage.getItem("projectId");
				//总金额
				var zongjia = window.sessionStorage.getItem("zongjia");
				this.ruleForm.zongjia = zongjia
				//用户id
				var userId = window.sessionStorage.getItem("userId");
				this.ruleForm.userId = userId;
				//回报id
				var retuId = window.sessionStorage.getItem("retuId");
				this.ruleForm.retuId = retuId;
				var param = new URLSearchParams();
				param.append("retuId", retuId);
					//根据回报id查回报信息
				var res = await this.$http.post('/selectRetuTableByRIds', param);
				this.retutable = res.data.data
					//根据回报id查订单回报数量
				var res1 = await this.$http.post('/selectOrderNumberByRetuID',param)
					this.orderNumber = res1.data.data
					this.retutable.retuNumber
				//项目id
				var projectId = window.sessionStorage.getItem("projectId");
				this.ruleForm.pId = projectId;
				var param1 = new URLSearchParams();
				param1.append("projectId", projectId);				
					//根据项目id查项目信息
				var ress = await this.$http.post('/selectProjectByProjectId', param1);
				this.project = ress.data.data[0]
					//根据项目id查发起人信息
				var ress1 = await this.$http.post('/selectByPid', param1);
				this.sponsor = ress1.data.data
				
				this.orderNumber1 = window.sessionStorage.getItem("orderNumber1")			
			},
			 resetForm(formName) {
			        this.$refs[formName].resetFields();
			},
			// 添加订单
			async addOrder(){
				// alert(this.ruleForm.address)
				if(this.radio==1){
					if(this.ruleForm.name!=''&&this.ruleForm.phone!=''&&this.ruleForm.address){
					var param = new URLSearchParams();
					param.append("pId",this.ruleForm.pId)
					param.append("userId",this.ruleForm.userId)
					param.append("retuId",this.ruleForm.retuId)
					param.append("orderName",this.ruleForm.name)
					param.append("orderNumber",this.orderNumber1)
					this.ruleForm.address = this.ruleForm.address +';'+this.ruleForm.xxaddress
					param.append("address",this.ruleForm.address)
					param.append("dphone",this.ruleForm.phone)
					param.append("dText",this.ruleForm.beizhu)
					param.append("isPay",this.ruleForm.isPay)
					var res =await this.$http.post("/addOrder",param);
					if(res.data.code==200){
						var oid = res.data.data
						this.alipay(oid)
					}
					}else{
					this.$message.error('请先填写收货人信息')
					}
					
				}else{
					this.$message.error('请先确认风险规则')
				}
			},
			async alipay(val){
				var param = new URLSearchParams();
				param.append("out_trade_no",val)
				param.append("money",this.ruleForm.zongjia)
				var res = await this.$http.post("/alipay",param);
				
				const dd = document.createElement("div");
				dd.innerHTML = res.data;
				console.log(res.data)
				document.body.appendChild(dd);
				document.forms['punchout_form'].submit();
			},
			// 订单
			dingdan1(){
				this.$router.push('/dingdan1')
			}
		},
		mounted() {
			this.selecctAllId()
		}
	  }
</script>

<style>
</style>
